<template>
		
		<view class="index" v-if="pageLoad">
		
				<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
					<block v-for="(tab,index) in tabs" :key="tab.id">
						<view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav" >{{tab.typeName}}</view>
					</block>
				</scroll-view>
				<swiper :current="currentTab" class="swiper-box" duration="300" @change="bindChange">
					<block v-for="(tab,index1) in shows" :key="index1">
						<swiper-item>
							<scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index1)" >
								<view v-for="(show,index2)  in tab" :key="index2">
									<card :data="show" @click="onNavigator" @addPartyUpvote="addUpvote"></card>
								</view>


							</scroll-view>
						</swiper-item>
					</block>
				</swiper>
				<view style="margin-top: 10;"></view>
		</view>
</template>

<script>
	import {getUrl} from '@/common/oss';
	import {All} from '@/api/cms/category';
	import {page} from '@/api/cms/page.js';
	import card from '@/components/card.vue'
	import loadMore from '@/components/load-more.vue'
	export default {
		components: {
			card,
			loadMore
		},
		data() {
			return {
				pageLoad:false, 
				showTypeId: '',
				title: "食色秀",
				tabs: [
					{
						id: "tab0",
						typeName: "最新",
						orderBy:"createdStamp",
						sort: "desc",
						page: 1,
						params: {}
					},
					{
						id: "tab1",
						typeName: "热帖",
						orderBy:"hotValue",
						sort: "desc",
						page: 1,
						params: {}
					},
					{
						id: "tab2",
						typeName: "精华",
						orderBy:"createdStamp",
						sort: "desc",
						page: 1,
						params: {
							isEssence: 'Y',
						}
					},
					{
						id: "tab3",
						typeName: "全部",
						orderBy:"createdStamp",
						sort: "desc",
						page: 1,
						params: {}
					}
				],
				shows:[
					[],
					[],
					[],
					[]
				],
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad: function (e) {
			this.showTypeId = e.navigateValue;
			var that = this;
			this.loadShows(0);
			this.loadShows(1);
			this.loadShows(2);
			this.loadShows(3);
			this.pageLoad = true;
		},
		onUnload:function(){
			this.scrollLeft = 0,
			this.isClickChange = false,
			this.currentTab = 0;
		},
		methods: {
			addUpvote(e) {
				console.log("addUpvote:"+ e.id )
				if(this.hasLogin) {
					addPartyUpvote({partyId: this.userInfo.partyId, showId: e.id}).then(res => {
						console.log(JSON.stringify(res))
						if(res.status == 200 && res.rel == true) {
							
							var showIndex = this.shows.findIndex(item => {
								return item.showId==e.id 
							});
							console.log(JSON.stringify(this.shows[showIndex]))
							this.shows[showIndex].upvoteCount = this.shows[showIndex].upvoteCount+1;
							console.log(this.shows[showIndex].upvoteCount);
							uni.showToast({
								title:res.data,
								icon:"none"
							})
						} else if(res.status == 200 && res.rel == true){
							uni.showToast({
								title:res.data,
								icon:"none"
							})
						}
						console.log(JSON.stringify(res))
					});
				} else {
					this.onNavigatorLogin();
				}
			},
			onNavigator: function(e) {
				console.log(e.url);
				if(this.hasLogin) {
					uni.navigateTo({
						url: e.url
					})
				} else {
					this.onNavigatorLogin();
				}
				
			},
			onNavigatorLogin: function() {
				uni.navigateTo({
					url: "/pages/security/login"
				})
			},
			loadShows: async function(index){
				var that = this;
				page(that.getParams(that.tabs[index].params,that.tabs[index].page, 
				4, that.tabs[index].orderBy, that.tabs[index].sort)).then(function(res){
					console.log(JSON.stringify(res))
					if(res.total > 0){
						for(var i = 0; i< res.data.length; i++){
							
							res.data[i].baseUrl = getUrl();
							that.shows[index].push(res.data[i]);
						}
						that.tabs[index].page = that.tabs[index].page + 1;
						that.loadingType = 0;
					}
				})
			},
			
			getParams: function(p, page, pageSize, orderBy, sort){
				let params = p || {};
				params.categoryTypeId = this.showTypeId;
				params.showStatusId = "SHOW_CHECKED";
				params.page=page;
				params.limit=pageSize;
				params.orderBy = orderBy;
				params.sort = sort;
				return params
			},
			bindChange: async function (e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.currentTab = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getWidth("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;

				let width = 0;
				
				for (let i = 0; i < index; i++) {
					let result = await this.getWidth(this.tabs[i].id);
					width += result.width;
				}
				

				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getWidth(this.tabs[index].id),
					nowWidth = nowElement.width;

				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.currentTab = index; //一旦访问data就会出问题
			},
			getWidth: function (id) { //得到元素的宽高,
				console.log(id)
				return new Promise((res, rej) => {
					
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						if (id === 'tab-bar') {
							console.log("id=", id, "数据:", data)
						}
						res(data);
					}).exec();
				})
			},
			swichNav: async function (e) { //点击tab-bar,
			    console.log(e);
				if (this.currentTab === e.target.dataset.current) {
					console.log(false);

					return false;
				} else {
					console.log("new tab");
					let tabBar = await this.getWidth("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					
						console.log(tabBarScrollLeft);
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.currentTab = e.target.dataset.current
				}
			},
			loadMore: function (e) {
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.loadShows(e)
			},
		}	

	}
</script>

<style>

	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		width: 750upx;
		height: 100%;
	}
	
	.index-bd {
		width: 750upx;
		height: 100%;
	}

	.swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 64upx;
		height: 64upx;
	}


	.swiper-tab-list {
		font-size: 30upx;
		width: 187.5upx;
		display: inline-block;
		text-align: center;
		color: #777777;
	}

	.on {
		color: #FF0000;
		border-bottom: 5px solid #FF0000;
	}

	.swiper-box {
		flex: 1;
		width: 100%;
		height: 100%;
	}

/* 	.swiper-box view {
		text-align: center;
	} */


	
</style>
